<template>
	<scroll-view :scroll-x="lxName==='hd'" class="pz_box cardCont" :class="lxName">
		<view v-for="(item, index) in list" :key="index" class="pz_box_item mb3"
			@click="jump2('/subPackages/teacher/detail?id=',item.teacherId)">
			<image class="pzImg" :src="item.teacherImg ? item.teacherImg : imgHost+'/user.png'"></image>
			<view class="pz_box_item_box">
				<view class="name limit-1-line">{{item.teacherName}}<text v-if="showList.indexOf('2') > -1 && lxName !== 'hd' && item.levelName">{{item.levelName || ''}}</text></view>
				<view v-if="showList.indexOf('2') > -1 && lxName === 'hd'" class="lx">
				   <text v-if="showList.indexOf('2') > -1">{{item.levelName || ''}}</text>
			    </view>
				<view v-if="showList.indexOf('1') > -1" class="num">累计{{item.classNum || 0}}课时</view>
				<view v-if="lxName == 'zt'" class="detailBtn">详情</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			lxName: {
				type: String,
				default: 'hd'
			},
			list: {
				type: Array,
				default: () => []
			},
			showList: {
				type: Array,
				default: ()=>['1','2']
			},
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			}
		}

	}
</script>

<style lang="scss" scoped>
	.pz_box {
		.pzImg {
			vertical-align: top;
		}
		.pz_box_item {
			width: 100%;
			border-radius: 8rpx;
			position: relative;
			background-color: #fff;
			box-sizing: border-box;
			overflow: hidden;
			line-height: 1.5;
			.num {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.name {
				ont-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				text {
					line-height: 32rpx;
					border-radius: 4rpx;
					border: 1px solid $color;
					margin-left: 8rpx;
					color: $color;
					padding: 0 8rpx;
				}
			}
		}

		&.hd {
			white-space: nowrap;
			display: flex;

			.pz_box_item {
				// border: 1rpx solid #E5E5E5;
				width: 216rpx;
				display: inline-block;
				padding: 0 0 24rpx;
				margin-right: 16rpx;

				&:last-of-type {
					margin-right: 0;
				}

				.pzImg {
					width: 216rpx;
					height: 216rpx;
					display: block;
					margin: 0 auto;
				}

				.pz_box_item_box {
					text-align: center;
					view {
						margin-top: 8rpx;
						&.lx {
							font-size: 26rpx;
							color: $color;
						}
					}
				}
			}
		}
		&.zt {
		
			.pz_box_item {
				width: 100%;
				padding: 30rpx;
				display: flex;
				margin-bottom: 20rpx;
				&:last-of-type {
					margin-bottom: 30rpx;
				}
				.pzImg {
					width: 88rpx;
					height: 88rpx;
					border: 1rpx solid #F7F7F7;
					flex: none;
					margin-right: 20rpx;
				}
		
				.pz_box_item_box {
					flex: 1;
					view {
						&.lx {
							padding: 0 8rpx;
							line-height: 32rpx;
							margin-left: 16rpx;
							border-radius: 4rpx;
							border: 1rpx solid $color;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: $color;
						}
						&.num {
							margin-top: 10rpx;
						}
					}
					.detailBtn {
						position: absolute;
						width: 100rpx;
						line-height: 52rpx;
						border-radius: 30rpx;
						border: 1px solid $color;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						right: 30rpx;
						text-align: center;
						top: 50%;
						margin-top: -26rpx;
						color: $color;
					}
				}
			}
		}


	}
</style>